<template>
  <commonpanel title="世界前100国内球员年龄结构">
    <div class="line2">
      <div class="dataitem">
        <div class="displaybox">
          <div class="innerdisbox">
            <v-chart class="chart" :option="carTypeOption1" />
          </div>
        </div>
      </div>
    </div>
  </commonpanel>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import commonpanel from '@/components/common/panel.vue';
  const carTypeOption1 = ref({
    toolbox: {
      show: false,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    series: [
      {
        name: 'Nightingale Chart',
        type: 'pie',
        radius: [30, 80],
        center: ['50%', '50%'],
        roseType: 'area',
        label: {
          show: true,
          color: '#fff',
          textBorderColor: 'none',
        },
        itemStyle: {
          borderRadius: 8,
        },
        data: [
          { value: 0, name: '10-20岁' },
          { value: 9, name: '20-25岁' },
          { value: 2, name: '25-30岁' },
          { value: 1, name: '30-40岁' },
        ],
      },
    ],
  });
</script>
<style lang="scss" scoped>
  .line2 {
    height: 100%;
    overflow: hidden;
    padding-left: 30px;
    padding-right: 30px;

    .dataitem {
      text-align: center;
      height: 100%;

      .titleline {
        height: 20px;
        margin-top: 10px;
        overflow: hidden;
        text-align: center;

        .title {
          font-size: 14px;
          line-height: 20px;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          color: #ffffff;
        }
      }

      .displaybox {
        height: 100%;
        margin-top: 10px;
        text-align: center;
        // border: 1px solid red;

        .innerdisbox {
          height: 100%;
          display: inline-block;
          width: 100%;
        }
      }
    }
  }
</style>
